<template>
  <el-dialog v-model="dialogTableVisible"
             destroy-on-close :close-on-click-modal="false"
             draggable center :width="1200"
             custom-class="boxDialog"
  >
    <b class="closeBox" @click.stop="onClose"></b>
    <div class="w-full flex justify-between items-center">
    <el-form :inline="true" :model="from" class="w-full align-center search-form mb-5">
      <el-form-item class="label" :label="$t('iot.time')">
        <el-date-picker
          style="width: 250px"
          v-model="from.time"
          type="daterange"
          range-separator="-"
          :start-placeholder="$t('wms.startTime')"
          :end-placeholder="$t('wms.endTime')"
          class="custom-date-picker"
        />
      </el-form-item>
      <el-form-item class="label" :label="$t('mes.processCode')">
        <el-select v-model="from.work" style="width: 250px" clearable :placeholder="$t('wms.pleaseSelect')">
          <el-option
            v-for="item in data.perationList"
            :key="item.code"
            :label="item.text"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="label" :label="$t('agv.productionLine')">
        <el-select v-model="from.line" style="width: 250px" clearable :placeholder="$t('wms.pleaseSelect')">
          <el-option
            v-for="item in data.lineList"
            :key="item.code"
            :label="item.text"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-button icon="Search" class="buttons" type="primary" @click="getEndSerch">{{$t('wms.search')}}</el-button>
    </el-form>
    </div>
    <el-table :data="data.gridData"
              :header-cell-style="{fontSize: '16px',color:'#00faf9',textAlign:'center',borderColor:'#315377',background:'#15305a'}"
              :cell-style="{fontSize: '16px',textAlign:'center',color:'#cccccd',borderColor:'#315276',background:'#01020a'}">
      <el-table-column property="processCode" :label="$t('agv.process')"/>
      <el-table-column property="productionLineCode" :label="$t('agv.productionLine')"/>
      <el-table-column property="status" :label="$t('wms.firstStatus')">
        <template #default="scope">
          <el-tag v-if="scope.row.status == '1'" type="primary">{{$t('ems.powerOn')}}</el-tag>
          <el-tag v-else-if="scope.row.status == '2'" :style="{ backgroundColor: '#cafafa', color: '#00faf9' }">{{$t('ems.production')}}</el-tag>
          <el-tag v-else-if="scope.row.status == '3'" type="warning">{{$t('ems.shutDown')}}</el-tag>
          <el-tag v-else-if="scope.row.status == '4'" type="danger">{{$t('ems.breakdown')}}</el-tag>
          <el-tag v-else type="success">{{$t('ems.operation')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="attribute1" :label="$t('common.Duration')" />
    </el-table>
    <div class="flex justify-end mt-5 ">
      <el-pagination :currentPage="data.currentPage"
                     :page-size="data.pagesize"
                     :page-sizes="[20, 30, 50, 100]"
                     small background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="data.total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"/>
    </div>
  </el-dialog>
</template>


<script setup>
import { onMounted, ref, reactive, defineExpose } from 'vue'
import {getProcessData,fetchProcess} from '../ProductionLineApi'
import moment from 'moment'
import { useAppStoreHook } from '@/store/useAppStoreHook';



const store = useAppStoreHook();
const dialogTableVisible = ref(false)
const from = ref({
  time: [],
  work: '',
  line: ''
})
const data = reactive({
  item:{},
  currentPage: 1,
  pagesize: 10,
  total: 0,
  gridData:[],
  perationList:[],
  lineList:[],
  locationList:[]
})

const openAddDialog=async (item)=>{
  store.startLoading(true)
  data.item = item
  from.value.line =item.lineCode
  from.value.work = item.processCode
  await getRuleList('1')
  await getRuleList('2')
  await getList()
  store.startLoading(false)
  dialogTableVisible.value = true
}
// 获取工序 产线 位置列表
const getRuleList = (type) => {
  if (type === '1') {
    fetchProcess({
      type: type,
      parentCode: '',
      scanType: '',
    }).then((res) => {
      data.perationList = res.result.list
    })
  } else if (type === '2') {
    fetchProcess({
      type: type,
      parentCode: '',
      scanType: '',
    }).then((res) => {
      data.lineList = res.result.list
    })
  } else if (type === '3') {
    fetchProcess({
      type: type,
      parentCode: '',
      scanType: '',
    }).then((res) => {
      data.locationList = res.result.list
    })
  }
}

defineExpose({
  openAddDialog,
})
const getList =async () =>{
  try {
    const  params = {
      processCode: from.value.work,
      lineCode: from.value.line,
      current: data.currentPage,
      size: data.pagesize,
      beginTime: from.value?.time && from.value.time[0]
          ? moment(from.value.time[0]).format('YYYY-MM-DD')
          : '',
      endTime: from.value?.time && from.value.time[1]
          ? moment(from.value.time[1]).format('YYYY-MM-DD')
          : '',
    }
  let res = await getProcessData(params)
    if(res.code == 200){
      data.gridData = res.result.sheBeiDetails
      data.total = res.result.total
    }
  } catch (error) {
    console.log(error)
  }

}


const getEndSerch = () => {
  data.currentPage = 1
  getList()
}
const handleSizeChange = (val) => {
  data.pagesize = val
  getList()
}
const handleCurrentChange = (val) => {
    data.currentPage = val
    getList()
}
const onClose = () => {
  dialogTableVisible.value = false
}


</script>

<style scoped lang="scss">
.el-form-item{
  margin-bottom: 0;
}
.closeBox{
  position: absolute;
  width: 45px;
  height: 45px;
  background: url('../images/logout-icon.png') no-repeat;
  background-size: 100% 100%; /* 确保背景图像始终填充 */
  top: 24px;
  right: 39px;
}


</style>
